<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery.placeholder-1.0.0.js"></script>
<script type="text/javascript">
$(function () {
    $('#text1').placeholder();
    $('#textarea1').placeholder();

    $('#text2').placeholder({useInherentFunction: false});
    $('#pwd2').placeholder({useInherentFunction: false});
    $('#textarea2').placeholder({useInherentFunction: false});

    $('#text3').placeholder({useInherentFunction: false});
    /*$('#show_text3_val-btn').click(function (ev) {
        alert('通过ID获取的值：' + $('#text3').val() + '\n通过name获取的值：');
    });*/
    $('#textarea3').placeholder({useInherentFunction: false});
});
</script>
</head>
<body>
<fieldset>
    <legend>如果浏览器支持placeholder属性，以下表单会使用该属性</legend>
    <input id="text1" />
    <textarea id="textarea1"></textarea>
</fieldset>

<fieldset>
    <legend>JS实现的placeholder功能</legend>
    <input id="text2" value="Default Value" />
    <input type="password" id="pwd2" />
    <textarea id="textarea2"></textarea>
</fieldset>

<fieldset>
    <legend>获取表单元素的值</legend>
    <form method="get" action="">
        <input type="text" id="text3" name="text3" value="" />
        <!--input type="button" id="show_text3_val-btn" name="" value="Value" /-->
        <br />
        <textarea id="textarea3" name="textarea3"></textarea>
        <br />
        <input type="submit" name="" value="Submit" />
    </form>
</fieldset>

<fieldset>
    <legend>通过placeholder属性装载</legend>
    <input id="text4" placeholder="placeholder属性" />
    <textarea id="textarea4" placeholder="placeholder属性" ></textarea>
</fieldset>
</body>
</html>
